<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>创作者中心</title>
    <link rel="icon" href="../static/img/default_avatar/2e6ced4da4ff5a32c7f1866bff276450.png"
        th:href="@{/img/default_avatar/2e6ced4da4ff5a32c7f1866bff276450.png}" type="image/png">
    <link rel="stylesheet" href="../static/css/Creator-Center/Creator-Center.css"
        th:href="@{/css/Creator-Center/Creator-Center.css}">
    <link rel="stylesheet" href="../static/iconFont/iconfont.css" th:href="@{/iconFont/iconfont.css}">
</head>

<body>
    <span class="alert" style="color: red;"></span>
    <div class="nav">
        <header class="header">
            <div class="nav-left">
                <span class="nav-lef-wei">未来</span>
                <span class="nav-lef-text">头条</span>
            </div>
            <div class="header-right">
                <div class="notification">
                    <!--                <i class="iconfont icon-messages"></i>-->
                    <span class="notification-text">首页</span>
                </div>
                <div class="userInfo">
                    <img class="avatar" th:src="${user.avatar}" alt="用户头像">
                    <span class="username" th:text="${user.userName}"></span>
                </div>
            </div>
        </header>
    </div>

    <div class="main-container">
        <nav class="sidebar">
            <div class="sidebar-menu">
                <!--            <div class="menu-item">-->
                <!--                <i class=" iconfont icon-zhuye"></i>-->
                <!--                <span class="menu-text" data-category="message">消息</span>-->
                <!--            </div>-->
                <div class="menu-item menu-item-post">
                    <i class=" iconfont icon-chuangzuo"></i>
                    <span class="menu-text">创作</span>
                    <i class="iconfont icon-xiangshang-1"></i>

                </div>
                <div class="menu-item-list list-first">
                    <div class="sub-menu-item postEssay">文章</div>
                    <!--                <div class="sub-menu-item">视频</div>-->
                    <div class="sub-menu-item postEssay">微头条</div>
                </div>
                <div class="menu-item-admin">
                    <div class="menu-item menu-item-post-title">
                        <i class="iconfont icon-guanli"></i>
                        <span class="menu-text">管理</span>
                        <i class="iconfont icon-xiangshang-1"></i>

                    </div>
                    <div class="menu-item-list list-second">
                        <div class="sub-menu-item post-manage-active" data-category="posts-manage">作品管理</div>
                        <!--                    <div class="sub-menu-item" data-category="comment-manage">评论管理</div>-->
                        <!--                    <div class="sub-menu-item" data-category="draftsbox-manage">草稿箱</div>-->
                    </div>
                </div>

            </div>
        </nav>

        <main class="content">
            <!--        <div class="item active" data-category="message">-->
            <!--            <div class="message-center">-->
            <!--                <h2 class="message-center-title">消息中心</h2>-->
            <!--                <div class="message-center-actions">-->
            <!--                    <div class="message-tab messages-button">消息私信</div>-->
            <!--                    <div class="message-tab comment-button">评论和@</div>-->
            <!--                    <div class="message-tab fans-button">粉丝</div>-->
            <!--                    <div class="message-tab like-button">点赞</div>-->

            <!--                </div>-->
            <!--                <div class="undeline"></div>-->
            <!--                <div class="tab-pane" id="message">-->
            <!--                    <div class="message-left">-->
            <!--                        <div class="message-search">-->
            <!--                            <input type="text" placeholder="请输入用户名关键词">-->
            <!--                            <i class="iconfont icon-sousuo"></i>-->
            <!--                        </div>-->
            <!--                        <div class="message-list">-->

            <!--                            <div class="message-item">-->
            <!--                                <div class="message-icon">-->
            <!--                                    <i class="icon-system"></i>-->
            <!--                                    <span class="message-icon-count">2</span>-->
            <!--                                </div>-->
            <!--                                <div class="message-content">-->
            <!--                                    <span class="message-title">系统通知</span>-->
            <!--                                    <span class="message-time">04-24 08:47</span>-->
            <!--                                    <p class="message-text">用户资料审核通过。</p>-->
            <!--                                </div>-->
            <!--                            </div>-->
            <!--                            <div class="message-item">-->
            <!--                                <div class="message-icon">-->
            <!--                                    <i class="icon-topic"></i>-->
            <!--                                    <span class="message-icon-count">2</span>-->
            <!--                                </div>-->
            <!--                                <div class="message-content">-->
            <!--                                    <span class="message-title">话题邀请</span>-->
            <!--                                    <span class="message-time">04-19 15:00</span>-->
            <!--                                    <p class="message-text">嗨！用户4689384524125 恭喜你...</p>-->
            <!--                                </div>-->
            <!--                            </div>-->
            <!--                        </div>-->
            <!--                    </div>-->
            <!--                    <div class="message-right"></div>-->

            <!--                </div>-->

<!--                            <div class="tab-pane" id="comment">-->
<!--                                <div class="placeholder">-->
<!--                                    <div class="img-text">-->
<!--                                        <img class="empty" alt="暂无点赞"-->
<!--                                             src="//lf-content-ecology.toutiaostatic.com/obj/tt-content-ecology-fe/pgcfe/mp/personal/9d8f0f4caae2008639742015a7dcd07b.png">-->
<!--                                        <p class="placeholder-text">暂无评论和@</p>-->
<!--                                    </div>-->

<!--                                </div>-->
<!--                            </div>-->
            <!--                <div class="tab-pane" id="fans">-->
            <!--                    <div class="placeholder">-->
            <!--                        <div class="img-text">-->
            <!--                            <img class="empty" alt="暂无点赞"-->
            <!--                                 src="//lf-content-ecology.toutiaostatic.com/obj/tt-content-ecology-fe/pgcfe/mp/personal/9d8f0f4caae2008639742015a7dcd07b.png">-->
            <!--                            <p class="placeholder-text">暂无粉丝</p>-->
            <!--                        </div>-->

            <!--                    </div>-->
            <!--                </div>-->
            <!--                <div class="tab-pane" id="likes">-->
            <!--                    <div class="placeholder">-->
            <!--                        <div class="img-text">-->
            <!--                            <img class="empty" alt="暂无点赞"-->
            <!--                                 src="//lf-content-ecology.toutiaostatic.com/obj/tt-content-ecology-fe/pgcfe/mp/personal/9d8f0f4caae2008639742015a7dcd07b.png">-->
            <!--                            <p class="placeholder-text">暂无点赞</p>-->
            <!--                        </div>-->

            <!--                    </div>-->
            <!--                </div>-->
            <!--            </div>-->
            <!--        </div>-->
            <div class="item posts-manage" data-category="posts-manage">
                <div class="tab-bar">
                    <div>
                        <span class="tab-item active all">全部</span>
                        <span  class="tab-item posted" >已发布</span>
                        <span  class="tab-item reviewing">审核中</span>
                        <span  class="tab-item reject">审核未通过</span>
                        <span class="tab-item drafts">草稿箱 </span>
                    </div>
                    <!--                <div class="search">-->
                    <!--                    <input type="text" placeholder="搜索关键词">-->
                    <!--                    <button>搜索</button>-->
                    <!--                </div>-->
                </div>
                <!-- 加载动画 -->
                <div class="outLoading" style="display: none">
                    <div id="loading" class="loading">
                        <div class="spinner"></div>
                    </div>
                </div>

                <div class="work-item-lists">
<!--                    <div class="work-item-help-div" th:each="post:${posts}" th:data-post-id="${post.postId}">-->
<!--                        <div class="work-item">-->
<!--                            <span class="news-postId" style="display:none" th:text="${post.postId}"></span>-->
<!--                            <span class="news-userId" style="display:none" th:text="${post.userId}"></span>-->
<!--                            <div class="work-thumbnail">-->
<!--                                <img th:src="${post.coverImage}" alt="作品封面">-->
<!--                            </div>-->
<!--                            <div class="work-info">-->
<!--                                <div class="work-top">-->
<!--                                    <div class="work-title" th:text="${post.title}" th:data-post-id="${post.postId}"-->
<!--                                        th:data-user-id="${post.userId}">-->
<!--                                    </div>-->
<!--                                    <div class="work-date" th:text="${post.createdTime}"></div>-->

<!--                                </div>-->
<!--                                <div class="work-status">-->
<!--                                    <span class="tag" th:text="${post.auditStatusText}"></span>-->

<!--                                </div>-->

<!--                                <div class="work-actions">-->
<!--                                    <ul class="work-stats">-->
<!--                                        <li> · 收藏-->
<!--                                            <span th:text="${post.viewCount}"></span></li>-->
<!--                                        <li> · 点赞-->
<!--                                            <span th:text="${post.likeCount}"></span>-->
<!--                                        </li>-->
<!--                                        <li> · 评论-->
<!--                                            <span th:text="${post.commentCount}" class="currentPostCommentCount"></span>-->
<!--                                        </li>-->
<!--                                    </ul>-->
<!--                                    <div class="actions-right">-->
<!--                                        <button class="post-comment-button" th:data-post-id="${post.postId}">-->
<!--                                            查看评论-->
<!--                                        </button>-->
<!--                                        <button class="modify" th:data-post-id="${post.postId}">-->
<!--                                            修改-->
<!--                                        </button>-->
<!--                                        <button class="post-delete-button" th:data-post-id="${post.postId}">-->
<!--                                            删除</button>-->
<!--                                    </div>-->
<!--                                    &lt;!&ndash; <div style="clear: both;"></div> &ndash;&gt;-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->

                </div>
            </div>
            <div class="item" data-category="comment-manage"></div>
            <div class="item" data-category="draftsbox-manage"></div>

        </main>
    </div>
    <!-- 查看自己发布的文章的所有评论 -->
    <div class="comment-popup">
        <div class="popup-content">

            <div class="close-button">&times;</div>
            <div class="comment-filter-list">
                <div class="work-item-box">
                    <div class="item-cover">
                        <img class="item-img" src="">
                    </div>
                    <div class="item-content">
                        <div class="content-main">
                            <div class="main-title">
                                <!-- <<苦尽柑来遇见你>> -->
                            </div>
                        </div>
                        <div class="content-infor">
                            <span class="info-item"></span>
                            <span class="info-item item-data"></span>
                        </div>
                    </div>
                </div>
                <div class="list-section">
                    <div class="comment-filter-list-header">
                        <div class="count">共
                            <span class="currentCount"></span>条评论
                        </div>
                    </div>
                    <div class="article-comment-list">
                        <div class="comment-item-wrap">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="confirm-popup">
        <div class="popup-content">
            <div class="container">
                <div class="close">
                    <span class="delete-close-button">&times;</span>
                </div>
                <div class="confirm-text">
                    确定删除此回复?
                </div>
                <div class="confirm-alert">
                    删除回复后将不可恢复,请谨慎操作
                </div>
                <div class="confirm-footer">
                    <button class="cancel-button">取消</button>
                    <button class="confirm-button">确定</button>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="../static/js/Creator-Center.js" th:src="@{/js/Creator-Center.js}"></script>
    <script th:inline="javascript">
        var myPosts =/*[[${posts}]]*/[];
        console.log(myPosts);
        // function truncateTitles({ selector, maxLength = 30, ellipsis = '.....' }) {
        //     const elements = document.querySelectorAll(selector);
        //     elements.forEach(element => {
        //         if (element.textContent.length > maxLength) {
        //             element.textContent = element.textContent.slice(0, maxLength) + ellipsis;
        //         }
        //     });
        // }
        // truncateTitles({ selector: '.work-title', maxLength: 30 });

    </script>
</body>

</html>